<template lang="pug">
div.item-list
    h1.title {{title}}
    yd-list(theme='1')
        yd-list-item(v-for="item in items",:key="item.tid",type="div",@click.native="appointment(item)")
            img(slot='img',:src='item.imgurl')
            span(slot='title') {{item.tname}}
        yd-list-item(v-for="product in products",:key="product.pid")
            img(slot='img',:src='product.imgurl')
            span(slot='title') {{product.pname}}
</template>
<script>
import { mapMutations } from "vuex";
export default {
  props: ["items", "products","title"],
  methods: {
    ...mapMutations(["selectItem"]),
    appointment(item) {
      this.selectItem(item);
      this.$router.push("/appointment");
    }
  }
};
</script>

<style lang="stylus">
.item-list{margin-top: .2rem
.title {
    background-color: #fff;
    padding-left: .2rem;
    line-height .5rem;

}
.yd-list-theme1 {
    .yd-list-img {
        padding: 0;
        height: 2.625rem;

        img {
            margin-top: 0;
        }
    }

    .yd-list-mes {
        height: 0.7rem;
    }
}
}
</style>

